<template>
  <div class="box">
    <el-card>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="学员信息" name="one">
          <div class="etms_components_form">
            <el-form>
              <el-form-item label="学员自定义设置" label-width="120px">
                <el-button type="default" @click="customDialogVisible = true"
                  >设置</el-button
                >
              </el-form-item>
              <el-form-item label="学员来源" label-width="120px">
                <el-button type="default" @click="sourceDialogVisible = true"
                  >设置</el-button
                >
              </el-form-item>
              <el-form-item label="学员标签" label-width="120px">
                <el-button type="default">设置</el-button>
              </el-form-item>
              <el-form-item label="亲属关系类型" label-width="120px">
                <el-button type="default">设置</el-button>
              </el-form-item>

              <el-form-item label="成长档案类型" label-width="120px">
                <el-button type="default">设置</el-button>
              </el-form-item>
              <el-form-item label="年级" label-width="120px">
                <el-button type="default">设置</el-button>
              </el-form-item>
              <el-form-item label="科目" label-width="120px">
                <el-button type="default">设置</el-button>
              </el-form-item>
              <el-form-item label="清除学员人脸" label-width="120px">
                <el-button type="default">立即清除</el-button>
                <span style="color: #909399;">&nbsp;&nbsp;
                  清除所有学员考勤所采集的人脸信息</span
                >
              </el-form-item>
              <el-form-item label="初始密码" label-width="120px">
                <el-button type="default">123456</el-button>
                <span class="yellow"
                  >设置学员的默认登录密码,学员可以使用"手机号+密码"的形式在学员端登录
                  (设置完成后,新添加的学员才生效)</span
                >
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
        <el-tab-pane label="推荐有奖" name="two">推荐</el-tab-pane>
        <el-tab-pane label="节假日设置" name="three">节假日设置</el-tab-pane>
        <el-tab-pane label="积分规则设置" name="four">积分规则设置</el-tab-pane>
        <el-tab-pane label="考勤设置" name="five">考勤设置</el-tab-pane>
        <el-tab-pane label="点名设置" name="six">点名设置</el-tab-pane>
        <el-tab-pane label="扫码扣课" name="seveen">扫码扣课</el-tab-pane>
        <el-tab-pane label="通知设置" name="eight">通知设置</el-tab-pane>
        <el-tab-pane label="分享面板设置" name="nine">分享面板设置</el-tab-pane>
        <el-tab-pane label="收据打印" name="ten">收据打印</el-tab-pane>
        <el-tab-pane label="支付设置" name="eleven">支付设置</el-tab-pane>
        <el-tab-pane label="闸机设置" name="twelve">闸机设置</el-tab-pane>
        <el-tab-pane label="其他设置" name="thirteen">其他设置</el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 学员自定义 -->
    <el-dialog
      v-model="customDialogVisible"
      title="学员自定义属性"
      width="35%"
      :before-close="handleClose"
    >
      <div class="content">
        <div class="header">
          <el-form :model="custform">
            <el-form-item>
              <el-input placeholder="请输入名称" v-model="custform.name"></el-input>
              <el-button type="primary" @click="save1">保存</el-button></el-form-item
            >
          </el-form>
        </div>
        <div class="content" style="content-container">
          <el-table :data="tableData1" style="width: 100%" scrollbar-always-on="true">
            <el-table-column prop="name" label="名称" width="400px"> </el-table-column>
            <el-table-column label="操作" width="50px">
              <template #default="scope">
                <el-button @click="deleteFn(scope.row)" style="border: 0; color: #1890ff">
                  <span class="blue">删除</span>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>
    <!-- 学员来源 -->
    <el-dialog
      v-model="sourceDialogVisible"
      title="学员来源"
      width="35%"
      :before-close="handleClose"
    >
      <div class="content">
        <div class="header">
          <el-form :model="sourceform">
            <el-form-item>
              <el-input placeholder="请输入名称" v-model="sourceform.name"></el-input>
              <el-button type="primary" @click="save2">保存</el-button></el-form-item
            >
          </el-form>
        </div>
        <div class="content" style="content-container">
          <el-table :data="tableData2" style="width: 100%" scrollbar-always-on="true">
            <el-table-column prop="name" label="名称" width="400px"> </el-table-column>
            <el-table-column label="操作" fixed="right">
              <template #default="scope">
                <el-button
                  @click="deleteFn2(scope.row.idx)"
                  style="border: 0; color: #1890ff"
                >
                  <span class="blue">删除</span>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";

//tab数据初始化
const activeName = ref("one");

//学员自定义
const customDialogVisible = ref(false);
const custform = ref({
  name: "",
  idx: "",
});
//table1 数据
const tableData1 = ref([
  { id: 1, name: "2022届" },
  { id: 2, name: "2023届" },
  { id: 3, name: "2024届" },
  { id: 4, name: "2025届" },
  { id: 5, name: "2026届" },
  { id: 6, name: "2027届" },
  { id: 7, name: "2028届" },
  { id: 8, name: "2029届" },
]);

//删除1逻辑
const deleteFn = (row) => {
  console.log(row.id);
  tableData1.value.splice(row.id - 1, 1);
  ElMessage({
    message: "删除成功!",
    type: "success",
  });
  console.log("@1", tableData1.value);
};

//添加1逻辑
const save1 = () => {
  console.log("value1", custform.value.name);
  const obj1 = { id: tableData1.value.length + 1, name: custform.value.name };
  tableData1.value.push(obj1);
  console.log("@1", tableData1.value);
};

//table2 数据
//学员来源
const sourceDialogVisible = ref(false);
const sourceform = ref({
  name: "",
  idx: "",
});

const tableData2 = ref([
  { idx: 1, name: "转介绍" },
  { idx: 2, name: "门店到访" },
  { idx: 3, name: "电话邀约" },
  { idx: 4, name: "家长分享" },
  { idx: 4, name: "抖音" },
  { idx: 5, name: "小红书" },
  { idx: 6, name: "三盗墓公众号" },
]);
// 删除2逻辑
const deleteFn2 = (idx) => {
  tableData2.value.splice(idx - 1, 1);
  ElMessage({
    message: "删除成功!",
    type: "success",
  });
  console.log("@2", tableData2.value);
};

//添加2逻辑
const save2 = () => {
  console.log("value2", sourceform.value.name);
  const obj2 = { idx: tableData2.value.length + 1, name: sourceform.value.name };
  tableData2.value.push(obj2);
  console.log("@2", tableData2.value);
};
</script>

<style lang="scss" scoped>
.box {
  margin: 20px;
}

.el-button {
  padding: 0px 15px;
  font-size: 12px;
  border-radius: 3px;
  border: 1px solid #dcdfe6;
}

.yellow {
  color: #e6a23c;
  font-size: 12px;
  margin-left: 5px;
}

.el-dialog__body {
  padding: 24px;
  max-height: 80vh;
  overflow-y: auto;
}

.el-table {
  font-size: 13px;
  max-height: 350px;
  overflow: auto;
}

.header {
  padding: 20px;
  border-top: 1px solid #ccc;
}

.el-input {
  width: 250px;
  margin-right: 10px;
}
</style>
